import React, { Component } from 'react'
import { InputGroup, Button, FormControl } from 'react-bootstrap'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

class CartItemInputNumber extends Component {

  render () {
    const { goods_num, onSetNum, disabled } = this.props
    return (
      <InputGroup>
        <InputGroup.Prepend>
          <InputGroup.Text
            as = {Button}
            disabled = {disabled}
            onClick = {() => onSetNum(goods_num - 1)}>
            <FontAwesomeIcon icon = {'minus'} />
          </InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl
          disabled = {disabled}
          className = {'text-center'} type = {'number'}
          onChange = {(e) => onSetNum(e.target.value)}
          value = {goods_num} />
        <InputGroup.Append>
          <InputGroup.Text
            as = {Button}
            disabled = {disabled}
            onClick = {() => onSetNum(goods_num + 1)}>
            <FontAwesomeIcon icon = {'plus'} />
          </InputGroup.Text>
        </InputGroup.Append>
      </InputGroup>
    )
  }
}

export default CartItemInputNumber
